<template>
  <div class="header">
    <div class="select">
      <el-button class="selectbtn">年份选择</el-button>
      <el-select v-model="yearv" placeholder="">
        <el-option
          v-for="item in years"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>

    <div class="select2">
      <el-button>月份选择</el-button>
      <el-select v-model="monthv" placeholder="">
        <el-option
          v-for="item in months"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>

    <el-button type="primary" icon="el-icon-search" @click="chakan()"
      >查看</el-button
    >
  </div>
</template>

<script>
import getseries from "../../../../utils/getserise.js";
export default {
  data() {
    return {
      input2: "",
      years: ["all", 2018, 2019, 2020, 2021],
      yearv: "all",
      months: ["all", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      monthv: "all",
      message: "",
      option: "",
    };
  },
  methods: {
    chakan() {
      if (this.yearv == 2021) {
        console.log(1);
        this.getshangpin21();
      }
      if (this.yearv == "all") {
        console.log('all');
        this.getshangpin();
      }else{
         this.option = {
          title: {
            text: "折线图",
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["AD钙奶", "冰红茶", "绿茶", "瓜子", "纯牛奶"],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "AD钙奶",
              type: "line",
              stack: "总量",
              data: [
                120, 132, 11, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
              ],
            },
            {
              name: "冰红茶",
              type: "line",
              stack: "总量",
              data: [
                220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 230,
              ],
            },
            {
              name: "绿茶",
              type: "line",
              stack: "总量",
              data: [
                150, 232, 201, 154, 190, 33, 410, 120, 132, 101, 134, 90, 230,
              ],
            },
            {
              name: "瓜子",
              type: "line",
              stack: "总量",
              data: [
                320, 332, 301, 334, 30, 330, 320, 120, 132, 101, 134, 90, 230,
              ],
            },
            {
              name: "纯牛奶",
              type: "line",
              stack: "总量",
              data: [
                820, 932, 901, 94, 1290, 1330, 130, 120, 132, 101, 134, 90, 230,
              ],
            },
          ],
        };
        this.$emit("option", this.option);
      } 

    },
    getshangpin() {
      this.$axios({
        url: "/findall",
      })
        .then((res) => {
          let data = res.data.data;
          const { arr, names } = getseries(data);
          console.log(arr);
          console.log(names);
          this.option = {
            title: {
              text: "商品年销量",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: names,
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            toolbox: {
              feature: {
                saveAsImage: {},
              },
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: ["2019", "2020", "2021"],
            },
            yAxis: {
              type: "value",
            },
            series: arr,
          };
          this.$emit("option", this.option);
        })
        .catch((err) => {
          console.log(err);
        });
    },
     getshangpin21() {
      this.$axios({
        url: "/findmonth",
      })
        .then((res) => {
          let data = res.data.data;
          const { arr, names } = getseries(data);
          console.log(arr);
          console.log(names);
          this.option = {
            title: {
              text: "商品年销量",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: names,
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            toolbox: {
              feature: {
                saveAsImage: {},
              },
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
            },
            yAxis: {
              type: "value",
            },
            series: arr,
          };
          this.$emit("option", this.option);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-around;
  width: 1000px;
}
.select {
  display: flex;
  flex-wrap: nowrap;
  width: 180px;
}
.select2 {
  display: flex;
  flex-wrap: nowrap;
  width: 160px;
}
.el-input {
  width: 36%;
}
</style>